<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Table-less form styling</title>
		<link rel="stylesheet" type="text/css" href="/css/reset.css" media="screen">
		<link rel="stylesheet" type="text/css" href="/css/base.css" media="screen">
		<link rel="stylesheet" type="text/css" href="/css/form.css" media="screen">
	</head>
	<body>
		<div id="wrap">
			<form method="post" action="#" class="is">
				<fieldset>
					<legend>Account Information</legend>
					<ul class="form">
						<li class="row ">
							<label for="username">Username</label>
							<div class="field text">
								<input type="text" name="username" id="username" value="">
							</div>
						</li>
						<li class="row">
							<label for="password">Password</label>
							<div class="field password">
								<input type="password" name="password" id="password" value="">
							</div>
						</li>
					</ul>
				</fieldset>
				<fieldset>
					<legend>Personal Information</legend>
					<ul class="form">
						<li class="row ">
							<label class="heading" for="firstname">Name</label>
							<span class="field text left">
								<input type="text" name="firstname" id="firstname" value="">
								<label for="firstname">First</label>
							</span>
							<span class="field text right">
								<input type="text" name="lastname" id="lastname" value="">
								<label for="lastname">Last</label>
							</span>
							<!-- @todo I'm not sure why I need this... wufoo doesn't -->
							<div class="clear"></div>
						</li>
						<li class="row left">
							<label for="phone">Phone Number</label>
							<div class="field text">
								<input type="text" name="phone" id="phone" value="">
							</div>
						</li>
						<li class="row right">
							<label class="heading" for="email">E-mail</label>
							<div class="field text">
								<input type="text" name="email" id="email" value="">
							</div>
						</li>
						<li class="row">
							<label class="heading" for="address">Address</label>
							<div class="group address">
								<span class="field text full">
									<input type="text" name="address" id="address" value="">
									<label for="address">Street Address</label>
								</span>
								<span class="field text full">
									<input type="text" name="address2" id="address2" value="">
									<label for="address2">Address Line 2</label>
								</span>
								<span class="field text left">
									<input type="text" name="city" id="city" value="">
									<label for="city">City</label>
								</span>
								<span class="field text right">
									<input type="text" name="state" id="state" value="">
									<label for="state">State</label>
								</span>
								<span class="field text left">
									<input type="text" name="zip" id="zip" value="">
									<label for="zip">Zip</label>
								</span>
							</div>
						</li>
						<li class="row">
							<label for="about">Tell us about yourself</label>
							<div class="field textarea">
								<textarea name="about" id="about" rows="10" cols="40"></textarea>
							</div>
						</li>
					</ul>
				</fieldset>
				<ul class="form">
					<li class="row">
						<span class="field submit">
							<input type="submit" value="Submit">
						</span>
						<span class="field button">
							<input type="button" value="Cancel">
						</span>
					</li>
				</ul>
			</form>
		</div>
	</body>
</html>